<script>
import _ from 'lodash'
import dataObjectConf from '../data-object-conf.js'
import { getUiItemDataObject, generateOperateButtons, buttonAssociationHandler, getIdentificationDataObject  } from '../mixins.js'

const getSelectDataObject = (setting = {}, context) => {
  const { options } = setting
  let event = options.event
  return _.merge({}, dataObjectConf, {
    props: {
      placeholder: options.placeholder,
      value: options.defaultValue,
      multiple: options.multiple,
      options: options.options
    },
    on: {
      'on-change': () => {
        for(let i = 0; i < event.length; i++){
          if(event[i].value[1].value === 'on-change'){
            console.log('on-change')
            // buttonAssociationHandler(context, event[i])
          }
        }
      }
    }
  })
}

export default {
  name: 'SelectAdapter',
  props: [
    'setting',
    'editable',
    'markSelect',
    'selected'
  ],
  functional: true,
  render (h, context) {
    const editable = context.props.editable
    const markSelect = context.props.markSelect
    const extra = editable
      ? generateOperateButtons(h, context)
      : []
    const mark = markSelect ? getIdentificationDataObject(h, context) : []
    return h('FormItem', getUiItemDataObject(context), [
      ...mark,
      h(
        'Select',
        getSelectDataObject(context.props.setting, context),
        context.props.setting.options.options.map(item => {
          return (<i-option value={ item.value }>{ item.value }</i-option>)
        })
      ),
      ...extra
    ])
  }
}
</script>
